<template>
  <div class="container">
    <headerBar :title="local.logisticsDetail" @changeLan="changeLan"></headerBar>
    <div :style="{paddingTop: pdt+'px'}" class="all" style="padding-bottom: 120rpx;">
      <!--物流信息-->
      <div class="top">
        <div class="select-panel">
          <div class="panel-goods">
            <span class="name" :class="lang == 'zh'||lang =='zh_CN'?'w_85':'w_110'">
              <span style="color: red;">*</span>
              {{local.logisticsOrderNo}}：
            </span>
            <div class style="border-bottom: 2rpx solid;flex:1;">
              <input :value="pageData.trackNumber" disabled :placeholder="local.peleaseEnter" />
              <!-- 物流单号 -->
            </div>
          </div>
          <div class="panel-goods">
            <div
              class="name"
              :class="lang == 'zh'||lang =='zh_CN'?'w_85':'w_110'"
            >{{local.businessDate}}：</div>
            <picker
              class="weui-btn"
              mode="date"
              disabled
              :value="date"
              start="1999-01-01"
              end="2099-01-01"
            >
              <!-- 业务日期 -->
              <input disabled :value="pageData.busDate" :placeholder="local.peleaseEnter" />
            </picker>
          </div>
          <div class="panel-goods">
            <div class="name" :class="lang == 'zh'||lang =='zh_CN'?'w_85':'w_110'">{{local.status}}：</div>
            <div class="names-goods">{{pageData.status == 'PASS'?local.reviewed:local.notSaved}}</div>
          </div>
        </div>
        <div class="select-panel">
          <div class="panel-goods">
            <div class="name" :class="lang == 'zh'||lang =='zh_CN'?'w_85':'w_110'">
              <span style="color: red;">*</span>
              {{local.bookingNumber}}：
            </div>
            <div class style="border-bottom: 2rpx solid;flex:1;">
              <input disabled :value="pageData.bookingNo" :placeholder="local.peleaseEnter" />
              <!-- <input disabled v-model="logisticsObj.bookingNo" :placeholder="local.peleaseEnter" /> -->
            </div>
          </div>
          <div class="panel-goods">
            <div class="name" :class="lang == 'zh'||lang =='zh_CN'?'w_85':'w_110'">
              <span style="color: red;">*</span>
              {{local.boxCount}}：
            </div>
            <div
              class
              style="border-bottom: 2rpx solid;flex:1;display: flex;justify-content: space-between;"
            >
              <input disabled :value="pageData.boxCount" :placeholder="local.peleaseEnter" />
              <span class="unit">{{local.boxUnit}}</span>
            </div>
          </div>
          <div class="panel-goods">
            <div
              class="name"
              :class="lang == 'zh'||lang =='zh_CN'?'w_85':'w_110'"
            >{{local.beltType}}：</div>
            <div class style="border-bottom: 2rpx solid;flex:1;">
              <input
                disabled
                :value="pageData.beltType == '4'? local.otherBeltType:pageData.beltTypeName"
                :placeholder="local.peleaseEnter"
              />
            </div>
          </div>
          <div class="panel-goods" v-if="pageData.beltType == '4'">
            <div
              class="name"
              :class="lang == 'zh'||lang =='zh_CN'?'w_85':'w_110'"
            >{{local.beltTypeName}}：</div>
            <div class style="border-bottom: 2rpx solid;flex:1;">
              <input disabled :value="pageData.beltTypeName" :placeholder="local.peleaseEnter" />
            </div>
          </div>
          <div class="panel-goods">
            <div
              class="name"
              :class="lang == 'zh'||lang =='zh_CN'?'w_85':'w_110'"
            >{{local.boxType}}：</div>
            <div class style="border-bottom: 2rpx solid;flex:1;">
              <input
                disabled
                :value="pageData.boxType == '3'? local.otherBoxType:pageData.boxTypeName"
                :placeholder="local.peleaseEnter"
              />
            </div>
          </div>
          <div class="panel-goods" v-if="pageData.boxType == '3'">
            <div
              class="name"
              :class="lang == 'zh'||lang =='zh_CN'?'w_85':'w_110'"
            >{{local.boxType}}：</div>
            <div class style="border-bottom: 2rpx solid;flex:1;">
              <input disabled :value="pageData.boxTypeName" :placeholder="local.peleaseEnter" />
            </div>
          </div>
          <div class="panel-goods">
            <div class="name" :class="lang == 'zh'||lang =='zh_CN'?'w_85':'w_110'">
              <span style="color: red;">*</span>
              {{local.closingDate}}：
            </div>
            <picker
              disabled
              class="weui-btn"
              mode="date"
              :value="date"
              start="1999-01-01"
              end="2099-01-01"
            >
              <input disabled :value="pageData.sectionalCabinetTime" :placeholder="local.option" />
            </picker>
          </div>
        </div>
        <div class="select-panel">
          <div class="panel-goods">
            <div class="name" :class="lang == 'zh'||lang =='zh_CN'?'w_85':'w_110'">
              <span style="color: red;">*</span>
              {{local.workshopStaff}}：
            </div>
            <div class="page" style="border-bottom: 2rpx solid;flex:1;position: relative">
              <picker
                disabled
                class="weui-btn"
                :value="indexUserPicker"
                :range="carUserList"
                :range-key="'userName'"
              >
                <input
                  disabled
                  type="default"
                  :value="pageData.userName"
                  :placeholder="local.option"
                />
                <span class="unit">▼</span>
              </picker>
            </div>
          </div>
        </div>
        <div class="select-panel">
          <div class="panel-goods">
            <div
              class="name"
              :class="lang == 'zh'||lang =='zh_CN'?'w_85':'w_110'"
            >{{local.departureDate}}：</div>
            <picker
              disabled
              class="weui-btn"
              mode="date"
              :value="date"
              start="1999-01-01"
              end="2099-01-01"
            >
              <input disabled :value="pageData.departTime" :placeholder="local.peleaseEnter" />
            </picker>
          </div>
          <div class="panel-goods">
            <div class="name" :class="lang == 'zh'||lang =='zh_CN'?'w_85':'w_110'">
              <span style="color: red;">*</span>
              {{local.portOfDeparture}}：
            </div>
            <div class style="border-bottom: 2rpx solid;flex:1;">
              <input disabled :value="pageData.departHarbor" :placeholder="local.peleaseEnter" />
            </div>
          </div>
          <div class="panel-goods">
            <div class="name" :class="lang == 'zh'||lang =='zh_CN'?'w_85':'w_110'">
              <span style="color: red;">*</span>
              {{local.portOfDestination}}：
            </div>
            <div class style="border-bottom: 2rpx solid;flex:1;">
              <input disabled :value="pageData.purposeHarbor" :placeholder="local.peleaseEnter" />
            </div>
          </div>
        </div>
        <div class="select-panel">
          <div class="panel-goods">
            <div
              class="name"
              :class="lang == 'zh'||lang =='zh_CN'?'w_85':'w_110'"
            >{{local.shippingCompany}}：</div>
            <div class style="border-bottom: 2rpx solid;flex:1;">
              <input disabled :value="pageData.shippingCompany" :placeholder="local.peleaseEnter" />
            </div>
          </div>
          <div class="panel-goods">
            <div class="name" :class="lang == 'zh'||lang =='zh_CN'?'w_85':'w_110'">{{local.shipNo}}：</div>
            <div class style="border-bottom: 2rpx solid;flex:1;">
              <input
                disabled
                :value="pageData.shippingCompanyNumber"
                :placeholder="local.peleaseEnter"
              />
            </div>
          </div>
          <div class="panel-goods">
            <div
              class="name"
              :class="lang == 'zh'||lang =='zh_CN'?'w_85':'w_110'"
            >{{local.arrivalDate}}：</div>
            <picker
              class="weui-btn"
              mode="date"
              :value="date"
              start="1999-01-01"
              end="2099-01-01"
              disabled
            >
              <input disabled :value="pageData.arriveTime" :placeholder="local.peleaseEnter" />
            </picker>
          </div>
        </div>
      </div>

      <div class="blueTitle">{{local.commodityInformation}}:</div>
      <div style="padding-bootpm: 120rpx;">
        <!--商品信息-->
        <div v-for="(item, i) in goodsList" :key="i">
          <div class="select-panel">
            <div class="opreate jt_flex jt_flex_row_right">
              <div
                class="open"
                @click="openOrClose(goodsList,i,'goods')"
              >{{item.open ? local.fold : local.unfold}}</div>
            </div>
            <div class="panel-goods">
              <div class="name" :class="lang == 'zh'?'w_85':'w_110'">{{local.goodsName}}：</div>
              <div class="names-goods">{{item.goodsName}}</div>
            </div>
            <div class="panel-goods">
              <div class="name" :class="lang == 'zh'?'w_85':'w_110'">{{local.warehouseOut}}：</div>
              <div class="names-goods">{{item.warehouseName}}</div>
            </div>
            <div class="panel-goods">
              <div class="name" :class="lang == 'zh'?'w_85':'w_110'">{{local.isThereWood}}：</div>
              <picker
                class="weui-btn"
                style="border-bottom: 2rpx solid;width: 100%;"
                :value="item.isWoodiness*1-1"
                :id="i"
                :range="arrayWood"
                :range-key="'label'"
                disabled
              >
                <input
                  disabled
                  :value="arrayWood[item.isWoodiness-1].label"
                  type="default"
                  :placeholder="local.option"
                />
                <span class="unit"></span>
              </picker>
            </div>
            <div class="panel-goods">
              <div class="name" :class="lang == 'zh'||lang =='zh_CN'?'w_85':'w_110'">
                <span style="color: red;width: 2rpx;margin-right:12rpx">*</span>
                {{local.containerNumber}}：
              </div>
              <div class style="border-bottom: 2rpx solid;width: calc(100% - 82px)">
                <input
                  disabled
                  :data-index="i"
                  :placeholder="local.peleaseEnter"
                  v-model="item.containerNumber"
                />
              </div>
            </div>
          </div>
          <div class="select-panel" v-if="item.open">
            <div class="panel-goods">
              <div
                class="name"
                :class="lang == 'zh'||lang =='zh_CN'?'w_85':'w_110'"
              >{{local.grade}}：</div>
              <div class="names-goods">{{item.goodsLevelName}}</div>
            </div>
            <div class="panel-goods">
              <div
                class="name"
                :class="lang == 'zh'||lang =='zh_CN'?'w_85':'w_110'"
              >{{local.beltType}}：</div>
              <div class="names-goods">{{item.beltTypeName}}</div>
            </div>
          </div>
          <div class="stock-detail-panel" v-if="item.open">
            <div class="msg-detail-thickness">
              <span
                class="name"
                :class="lang == 'zh'||lang =='zh_CN'?'w_85':'w_110'"
              >{{local.thickness}}：</span>
              <div class style="border-bottom: 2rpx solid;">
                <input :placeholder="local.peleaseEnter" disabled v-model="item.sizeHeight" />
                <span class="unit">MM</span>
              </div>
            </div>
            <div class="msg-detail-width">
              <span
                class="name"
                :class="lang == 'zh'||lang =='zh_CN'?'w_85':'w_110'"
              >{{local.width}}：</span>
              <div class style="border-bottom: 2rpx solid;">
                <input :placeholder="local.peleaseEnter" disabled v-model="item.sizeWidth" />
                <span class="unit">MM</span>
              </div>
            </div>
            <div class="msg-detail-long">
              <span
                class="name"
                :class="lang == 'zh'||lang =='zh_CN'?'w_85':'w_110'"
              >{{local.length}}：</span>
              <div class style="border-bottom: 2rpx solid;">
                <input :placeholder="local.peleaseEnter" disabled v-model="item.sizeLong" />
                <span class="unit">M</span>
              </div>
            </div>
            <div class="msg-detail-long">
              <span
                class="name"
                :class="lang == 'zh'||lang =='zh_CN'?'w_85':'w_110'"
              >{{local.weight}}：</span>
              <div class style="border-bottom: 2rpx solid;">
                <input :placeholder="local.peleaseEnter" disabled v-model="item.weight" />
                <span class="unit">T</span>
              </div>
            </div>
          </div>
          <div
            class="select-photo"
            v-if="item.beginPicUrlList && item.beginPicUrlList.length && item.open"
          >
            <div class="a">{{local.photosBeforeAcceptance}}</div>
            <div class="b">
              <div class="page">
                <div class="weui-uploader__bd">
                  <div class="weui-uploader__files" id="uploaderFiles">
                    <block v-for="(element, index) in item.beginPicUrlList" :key="index">
                      <div
                        class="weui-uploader__file"
                        @click="predivImage"
                        :id="element"
                        :data-urls="item.beginPicUrlList"
                      >
                        <img
                          class="weui-uploader__img"
                          :src="Shop.IMG_URL+element"
                          mode="aspectFill"
                        />
                      </div>
                    </block>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="select-photo"
            v-if="item.endPicUrlList && item.endPicUrlList.length && item.open"
          >
            <div class="a">{{local.photosAfterAcceptance}}</div>
            <div class="b">
              <div class="page">
                <div class="weui-uploader__bd">
                  <div class="weui-uploader__files" id="uploaderFiles">
                    <block v-for="(element, index) in item.endPicUrlList" :key="index">
                      <div
                        class="weui-uploader__file"
                        @click="predivImage"
                        :id="element"
                        :data-urls="item.endPicUrlList"
                      >
                        <img
                          class="weui-uploader__img"
                          :src="Shop.IMG_URL+element"
                          mode="aspectFill"
                        />
                      </div>
                    </block>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="remark" v-if="item.open">
            <div>{{local.remark}}:</div>
            <textarea
              v-model="item.remark"
              disabled
              style="height: 100rpx;max-width: 879rpx;resize: none;"
            ></textarea>
          </div>
        </div>
        <!-- 装箱出库 -->
        <div style="margin: 44rpx auto 10rpx 20rpx;font-size: 36rpx;">{{local.packingOut}}</div>
        <div class="blueTitle">{{local.logisticsInformation}}:</div>
        <div v-for="(item, i) in encasementList" :key="i">
          <div class="stock-detail-panel">
            <div class="opreate jt_flex jt_flex_row_right">
              <div
                class="open"
                @click="openOrClose(encasementList,i,'encasement')"
              >{{item.open ? local.fold : local.unfold}}</div>
            </div>
            <div class="msg-detail-thickness">
              <span
                class="name"
                :class="lang == 'zh'||lang =='zh_CN'?'w_85':'w_110'"
              >{{local.containerNumber}}：</span>
              <picker
                class="weui-btn"
                style="border-bottom: 2rpx solid;width: 100%;"
                disabled
                :data-i="i"
                :range="containerNumberList"
                :value="indexContainerPicker"
              >
                <!-- v-model="arrayContainer[indexContainerPicker]" -->
                <input
                  disabled
                  type="default"
                  :value="item.containerNumber"
                  :placeholder="local.option"
                />
                <span class="unit"></span>
              </picker>
            </div>
            <div class="msg-detail-width">
              <span
                class="name"
                :class="lang == 'zh'||lang =='zh_CN'?'w_85':'w_110'"
              >{{local.goodsTotal}}：</span>
              <div class style="border-bottom: 2rpx solid;">
                <input v-model="item.goodsCount" :placeholder="local.peleaseEnter" disabled />
                <span class="unit"></span>
              </div>
            </div>
            <div class="stock-detail-belt">
              <span
                class="name"
                :class="lang == 'zh'||lang =='zh_CN'?'w_85':'w_110'"
              >{{local.lockNumber}}：</span>
              <div class style="border-bottom: 2rpx solid;">
                <input v-model="item.lockNumber" :placeholder="local.peleaseEnter" disabled />
              </div>
            </div>
          </div>
          <div class="select-photo" v-if="item.open">
            <div class="a">{{local.photosBeforePacking}}</div>
            <div class="b">
              <div class="page">
                <div class="weui-uploader__bd">
                  <div class="weui-uploader__files" id="uploaderFiles">
                    <block v-for="(element,index) in item.beginPicUrlList" :key="index">
                      <div
                        class="weui-uploader__file"
                        @click="predivImage"
                        :id="element"
                        :data-urls="item.beginPicUrlList"
                      >
                        <img
                          class="weui-uploader__img"
                          :src="Shop.IMG_URL + element"
                          mode="aspectFill"
                        />
                      </div>
                    </block>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="stock-detail-panel" v-if="item.open">
            <div class="msg-detail-thickness">
              <span
                class="name"
                :class="lang == 'zh'||lang =='zh_CN'?'w_85':'w_110'"
              >{{local.boxWeight}}：</span>
              <div class style="border-bottom: 2rpx solid;">
                <input v-model="item.weight" :placeholder="local.peleaseEnter" disabled />
                <span class="unit">T</span>
              </div>
            </div>
            <div class="msg-detail-thickness">
              <span
                class="name"
                :class="lang == 'zh'||lang =='zh_CN'?'w_85':'w_110'"
              >{{local.totalWeight}}：</span>
              <div class style="border-bottom: 2rpx solid;">
                <input v-model="item.totalWeight" :placeholder="local.peleaseEnter" disabled />
                <span class="unit">T</span>
              </div>
            </div>
            <div class="msg-detail-thickness">
              <span
                class="name"
                :class="lang == 'zh'||lang =='zh_CN'?'w_85':'w_110'"
              >{{local.weighingNumber}}：</span>
              <div class style="border-bottom: 2rpx solid;">
                <input
                  v-model="item.weighCode"
                  :placeholder="local.peleaseEnter"
                  :disabled="disabledEdit"
                />
              </div>
            </div>
            <div class="msg-detail-width">
              <span
                class="name"
                :class="lang == 'zh'||lang =='zh_CN'?'w_85':'w_110'"
              >{{local.weighingWeight}}：</span>
              <div class style="border-bottom: 2rpx solid;">
                <input v-model="item.weigh" :placeholder="local.peleaseEnter" :data-i="i" disabled />
                <span class="unit">T</span>
              </div>
            </div>
            <div class="msg-detail-width">
              <span
                class="name"
                :class="lang == 'zh'||lang =='zh_CN'?'w_85':'w_110'"
              >{{local.WeighingAndTotalWeightDifference}}：</span>
              <div class style="border-bottom: 2rpx solid;">
                <input v-model="item.weightDifference" :placeholder="local.peleaseEnter" disabled />
                <span class="unit">T</span>
              </div>
            </div>
          </div>
          <div class="select-photo" v-if="item.open">
            <div class="a">{{local.photosAfterPacking}}</div>
            <div class="b">
              <div class="page">
                <div class="weui-uploader__bd">
                  <div class="weui-uploader__files" id="uploaderFiles">
                    <block v-for="(element,index) in item.endPicUrlList" :key="index">
                      <div
                        class="weui-uploader__file"
                        @click="predivImage"
                        :id="element"
                        :data-urls="item.endPicUrlList"
                      >
                        <img
                          class="weui-uploader__img"
                          :src="Shop.IMG_URL + element"
                          mode="aspectFill"
                        />
                      </div>
                    </block>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom-bar">
          <ul class="tip mr_20">
            <li>{{local.commodityInformation}}:{{goodsList.length}}</li>
            <li>{{local.logisticsInformation}}:{{encasementList.length}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import home from '@/api/home'
import headerBar from '@/components/headerBar'
import { dictMatching, formatDate, previewImage } from '@/utils/index'
import Shop from '../../../../config/shop'
var a
export default {
  components: {
    headerBar
  },
  methods: {
    initLang(){
      this.local = wx.getStorageSync('local')
      this.lang = wx.getStorageSync('lang')
    },
    openOrClose(list, index,type) {
      if(type == 'encasement'){
        if(list[index].containerNumber == ''){
          wx.showToast({
            title: '请选择集装箱号',
            duration: 2000,
            icon: 'none'
          })
          return
        }  
      }
      list[index].open = !list[index].open
      list.push()
    },
    // affirmLogistics(id){
    //   home
    //     .affirmLogistics({ id: id })
    //     .then(res => { 
    //       if(res.code != 0) {
    //         wx.showToast({
    //           title: res.msg || 'error',
    //           duration: 2000,
    //           icon: 'none'
    //         })
    //       }
    //     })
    // },
    getPageData(id) {
      //获取当前页面数据方法
      wx.showLoading({
        title: this.local.loading,
        mask: true
      })
      home
        .getLogisticsListId({ id: id })
        .then(res => {
          wx.hideLoading()
          this.pageData = res
          this.goodsList = this.pageData.goodsList
          this.encasementList = this.pageData.encasementList
          this.pageData.busDate = wx.$timeFormat(this.pageData.busDate) //new Date(this.pageData.busDate).$format('dd/MM/yyyy')

          this.pageData.sectionalCabinetTime = this.pageData.sectionalCabinetTime == null ? '': wx.$timeFormat(this.pageData.sectionalCabinetTime)  //new Date(this.pageData.sectionalCabinetTime).$format('dd/MM/yyyy')
          this.pageData.departTime = this.pageData.departTime == null ? '': wx.$timeFormat(this.pageData.departTime) //new Date(this.pageData.departTime).$format('dd/MM/yyyy')
          this.pageData.arriveTime = this.pageData.arriveTime == null ? '': wx.$timeFormat(this.pageData.arriveTime) //new Date(this.pageData.arriveTime).$format('dd/MM/yyyy')
          this.disabledEdit = this.pageData.status == 'PASS'?true:false
          this.goodsList.map(item => {
            let { beginPicUrl, endPicUrl } = item
            item.goodsCount = 1  //商品数量默认1
            item.beginPicUrlList = beginPicUrl ? beginPicUrl.split(',') : []
            item.endPicUrlList = endPicUrl ? endPicUrl.split(',') : []
            item.goodsLevelName = dictMatching(
              wx.getStorageSync('goodsLevel') || [],
              item.goodsLevel
            )
            item.beltTypeName = dictMatching(
              wx.getStorageSync('beltType') || [],
              item.beltType
            )
          })
          this.encasementList.map(item => {
            let { beginPicUrl, endPicUrl, containerNumber } = item
            this.containerNumberList.push(containerNumber)
            item.isAdd = 1 //不是新增的集装箱
            item.beginPicUrlList = beginPicUrl ? beginPicUrl.split(',') : []
            item.endPicUrlList = endPicUrl ? endPicUrl.split(',') : []
          })
        })
        .catch(e => {
          console.log(e)
        })
    },
    changeLan (val, lang) {
      this.local = val
      this.lang = lang
    },
    async getLogisticsListId(id) {
      const data = await home.getLogisticsListId({ id: id })
      this.logisticsObj = data
      if (this.logisticsObj.encasementList.length !== 0) {
        this.logisticsObj.encasementList.map(item => {
          if (typeof item.beginPicUrl == 'string') {
            item.beginPicUrl = item.beginPicUrl.split(',')
          }
          if (typeof item.endPicUrl == 'string') {
            item.endPicUrl = item.endPicUrl.split(',')
          }
        })
      }
      if (this.logisticsObj.goodsList.length !== 0) {
        this.logisticsObj.goodsList.map(item => {
          if (typeof item.beginPicUrl == 'string') {
            item.beginPicUrl = item.beginPicUrl.split(',')
          }
          if (typeof item.endPicUrl == 'string') {
            item.endPicUrl = item.endPicUrl.split(',')
          }
        })
      }
    },
    predivImage(e) {
      a = true
      previewImage(e)
    },
  },
  data() {
    return {
      disabledEdit: false,
      lang: wx.getStorageSync('lang'),
      pdt: 66, //顶部
      local: wx.getStorageSync('local'), //国际化
      pageData: {}, //当前页面数据
      goodsList: [], //当前页面的商品数据
      encasementList: [], //物流信息
       containerNumberList: [],
      arrayWood: [
        { value: 1,label: '无' }, 
        { value: 2,label: '有'}],
      Shop,
      goodsCount: 1,
      indexContainerPicker: 0,
      indexWoodPicker: 0,
      logisticsDetail: {},
      logisticsObj: [],
      files: [],
      indexPicker: 1,
      logs: [],
      fileList: []
    }
  },
  onLoad(options) {
    this.initLang()
    this.pdt = this.globalData.CustomBar
   // this.affirmLogistics(options.id)
    this.getPageData(options.id)
  },
  onShow() {
    this.initLang()

    if (a) {
      a = false
      return
    } else {
      // 上一页返回的数据
      // this.prevPage()
    }

    
  }
}
</script>

<style scoped lang="scss">
@import 'index';
</style>
